﻿@page "/rich-text-editor/insert-emoticons"

@using Syncfusion.Blazor.Popups
@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.Navigations
@using Syncfusion.Blazor.RichTextEditor

@inherits SampleBaseComponent;

<SampleDescription>
    <p>
        This sample shows how to add your own commands to toolbar of the Rich Text Editor.
        The <code>“Ω” </code>  command is added to insert special characters in the editor.
        Click the “Ω” command to show the special characters list, and then choose the character to be inserted in the editor.
    </p>
</SampleDescription>
<ActionDescription>
    <p>
        The Rich Text Editor allows you to configure your own commands to its toolbar using the <code>RichTextEditorToolbarSettings</code> property.
        The command can be plain text, icon, or HTML template.
        You can also define the order and group where the command should be included.
        Bind the action to the command by getting its instance.
    </p>
</ActionDescription>
<div class="control-section">
    <div class="control-wrapper" id="rteSection">
        <SfRichTextEditor @ref="rteObj">
            <RichTextEditorToolbarSettings Items="@Tools">
                <RichTextEditorCustomToolbarItems>
                    <RichTextEditorCustomToolbarItem Name="Symbol">
                        <Template>
                            <button class="e-btn e-tbar-btn" @onclick="ClickHandler">
                                <div class="e-tbar-btn-text" style="font-weight: 500;">&#128578;</div>
                            </button>
                        </Template>
                    </RichTextEditorCustomToolbarItem>
                </RichTextEditorCustomToolbarItems>
            </RichTextEditorToolbarSettings>
            <div style="display:block;"><p style="margin-right:10px">The custom command "insert emoticons" is configured as the last item of the toolbar. Click on the command and choose the emoticon you want to include from the popup.</p></div>
        </SfRichTextEditor>
    </div>
</div>
<SfDialog @bind-Visible="@dialogVisible" ZIndex="1000" ShowCloseIcon="false" IsModal="true" Width="45%" Target="#rteSection">
    <DialogTemplates>
        <Header> Insert Emoticons </Header>
        <Content>
            <SfTab ID="emotIcons">
                <TabItems>
                    <TabItem>
                        <ChildContent>
                            <TabHeader Text="🙂"></TabHeader>
                        </ChildContent>
                        <ContentTemplate>
                            <div id="rteEmoticons-smiley">
                                @for (int i = 0; i < this.smileyList.Count; i++)
                                {
                                    int index = i;
                                    if (currentIndex == i)
                                    {
                                        <div class="char_block @activeClass" title="@this.smileyList.Values.ToList()[index]" @onclick="@(e => OnIconIconClick(index , 0))">
                                            @((MarkupString)this.smileyList.Keys.ToList()[index])
                                        </div>
                                    }
                                    else
                                    {
                                    <div class="char_block" title="@this.smileyList.Values.ToList()[index]" @onclick="@(e => OnIconIconClick(index, 0))">
                                        @((MarkupString)this.smileyList.Keys.ToList()[index])
                                    </div>
                                    }
                                }
                            </div>
                        </ContentTemplate>
                    </TabItem>
                    <TabItem>
                        <ChildContent>
                            <TabHeader Text="🐵"></TabHeader>
                        </ChildContent>
                        <ContentTemplate>
                            <div id="rteEmoticons-animal">
                                @for (int i = 0; i < this.smileyList.Count; i++)
                                {
                                    int index = i;
                                    if (currentIndex == i)
                                    {
                                        <div class="char_block @activeClass" title="@this.animalsList.Values.ToList()[index]" @onclick="@(e => OnIconIconClick(index, 1))">
                                            @((MarkupString)this.animalsList.Keys.ToList()[index])
                                        </div>
                                    }
                                    else
                                    {
                                        <div class="char_block" title="@this.animalsList.Values.ToList()[index]" @onclick="@(e => OnIconIconClick(index , 1))">
                                            @((MarkupString)this.animalsList.Keys.ToList()[index])
                                        </div>
                                    }
                                }
                            </div>
                        </ContentTemplate>
                    </TabItem>
                </TabItems>
            </SfTab>
        </Content>
    </DialogTemplates>
    <DialogButtons>
        <DialogButton Content="Insert" IsPrimary="true" OnClick="OnInsert" />
        <DialogButton Content="Cancel" OnClick="DialogOverlay" />
    </DialogButtons>
    <DialogEvents OnOverlayClick="DialogOverlay" />
</SfDialog>

@code{
    SfRichTextEditor rteObj;

    int currentIndex { get; set; } = -1;
    int currentTabIndex { get; set; }
    string activeClass = "e-active";
    private bool dialogVisible { get; set; }

    Dictionary<string, string> smileyList = new Dictionary<string, string>()
    {
        {"&#128512;" ,"Grinning face"},
        {"&#128513;","Grinning face with smiling eyesGrinning face with smiling eyes" },
        {"&#128514;" ,"Face with tears of joy"},
        {"&#128515;","Smiling face with open mouth"},
        {"&#128516;" ,"Smiling face with open mouth and smiling eyes"},
        {"&#128517;","Smiling face with open mouth and cold sweat" },
        {"&#128518;" ,"Smiling face with open mouth and tightly-closed eyes"},
        {"&#128519;","Smiling face with halo" },
        {"&#128520;" ,"Smiling face with hornsSmiling face with horns"},
        {"&#128521;","Winking face" },
        {"&#128522;" ,"Smiling face with smiling eyes"},
        {"&#128523;","Face savouring delicious food"},
        {"&#128524;" ,"Relieved face"},
        {"&#128525;","Smiling face with heart-shaped eyes   " },
        {"&#128526;" ,"Smiling face with sunglasses"},
        {"&#128527;","Smirking face" },
        {"&#128528;" ,"Neutral face"},
        {"&#128529;","Expressionless face" },
        {"&#128530;" ,"Unamused face"},
        {"&#128531;","Face with cold sweat" },
        {"&#128532;" ,"Pensive face"},
        {"&#128533;","Confused face" },
        {"&#128534;" ,"Confounded face"},
        {"&#128535;","Kissing face" },
        {"&#128536;" ,"Face throwing a kiss"},
        {"&#128537;","Kissing face with smiling eyes" },
        {"&#128538;" ,"Kissing face with closed eyes"},
        {"&#128539;","Face with stuck-out tongue" },
        {"&#128540;" ,"Face with stuck-out tongue and winking eye"},
        {"&#128541;","Face with stuck-out tongue and tightly-closed eyes" },
        {"&#128542;", "Disappointed face"},
        {"&#128543;", "Worried face"},
        {"&#128544;", "Angry face"},
        {"&#128545;","Pouting face"},
        {"&#128546;", "Crying face"},
        {"&#128547;","Persevering face"},
        {"&#128548;","Face with look  of triumph"},
        {"&#128549;","Disappointed but relieved face"},
        {"&#128550;", "Frowning face with open mouth"},
        {"&#128551;", "Anguished face"},
        {"&#128552;", "Fearful face"},
        {"&#128553;", "Weary face"},
        {"&#128554;", "Sleepy face"},
        {"&#128555;", "Tired face"},
        {"&#128556;", "Grimacing face"},
        {"&#128557;", "Loudly crying face"},
        {"&#128558;", "Face with open mouth"},
        {"&#128559;", "Hushed face"},
        {"&#128560;", "Face with open mouth and cold sweat"},
        {"&#128561;", "Face screaming in fear"},
        {"&#128562;", "Astonished face"},
        {"&#128563;", "Flushed face"},
        {"&#128564;", "Sleeping face"},
        {"&#128565;", "Dizzy face"}
    };

    Dictionary<string, string> animalsList = new Dictionary<string, string>()
    {
        {"&#128053", "Monkey Face"},
        {"&#128018", "Monkey"},
        {"&#129421", "Gorilla"},
        {"&#128054", "Dog Face"},
        {"&#128021", "Dog"},
        {"&#128041", "Poodle"},
        {"&#128058", "Wolf Face"},
        {"&#129418", "Fox Face"},
        {"&#128049", "Cat Face"},
        {"&#128008", "Cat"},
        {"&#129409", "Lion Face"},
        {"&#128047", "Tiger Face"},
        {"&#128005", "Tiger"},
        {"&#128006", "Leopard"},
        {"&#128052", "Horse Face"},
        {"&#128014", "Horse"},
        {"&#129412", "Unicorn Face"},
        {"&#129420", "Deer"},
        {"&#128046", "Cow Face"},
        {"&#128002", "Ox"},
        {"&#128003", "Water Buffalo"},
        {"&#128004", "Cow"},
        {"&#128055", "Pig Face"},
        {"&#128022", "Pig"},
        {"&#128023", "Boar"},
        {"&#128061", "Pig Nose"},
        {"&#128015", "Ram"},
        {"&#128017", "Ewe"},
        {"&#128016", "Goat"},
        {"&#128042", "Camel"},
        {"&#128043", "Two-Hump Camel"},
        {"&#128024", "Elephant"},
        {"&#129423", "Rhinoceros"},
        {"&#128045", "Mouse Face"},
        {"&#128001", "Mouse"},
        {"&#128000", "Rat"},
        {"&#128057", "Hamster Face"},
        {"&#128048", "Rabbit Face"},
        {"&#128007", "Rabbit"},
        {"&#128063", "Chipmunk"},
        {"&#129415", "Bat"},
        {"&#128059", "Bear Face"},
        {"&#128040", "Koala"},
        {"&#128060", "Panda Face"},
        {"&#128062", "Paw Prints"},
        {"&#128056", "Frog Face"},
        {"&#128010", "Crocodile"},
        {"&#128034", "Turtle"},
        {"&#129422","Lizard"},
        {"&#128013", "Snake"},
        {"&#128050", "Dragon Face"},
        {"&#128009", "Dragon"},
        {"&#129429", "Sauropod"},
        {"&#129430", "T-Rex"}
    };

    private List<ToolbarItemModel> Tools = new List<ToolbarItemModel>()
    {
        new ToolbarItemModel() { Command = ToolbarCommand.Bold },
        new ToolbarItemModel() { Command = ToolbarCommand.Italic },
        new ToolbarItemModel() { Command = ToolbarCommand.Underline },
        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
        new ToolbarItemModel() { Command = ToolbarCommand.Formats },
        new ToolbarItemModel() { Command = ToolbarCommand.Alignments },
        new ToolbarItemModel() { Command = ToolbarCommand.OrderedList },
        new ToolbarItemModel() { Command = ToolbarCommand.UnorderedList },
        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
        new ToolbarItemModel() { Command = ToolbarCommand.CreateLink },
        new ToolbarItemModel() { Command = ToolbarCommand.Image },
        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
        new ToolbarItemModel() { Name = "Symbol", TooltipText = "Insert Emoticons" },
        new ToolbarItemModel() { Command = ToolbarCommand.SourceCode },
        new ToolbarItemModel() { Command = ToolbarCommand.Undo },
        new ToolbarItemModel() { Command = ToolbarCommand.Redo }

    };

    private void OnIconIconClick(int index, int tabIndex)
    {
        this.currentIndex = index;
        this.currentTabIndex = tabIndex;
    }

    private async Task ClickHandler()
    {
        this.dialogVisible = true;
        await this.rteObj.SaveSelectionAsync();
    }

    private async Task OnInsert()
    {
        if (this.currentIndex > -1)
        {
            string value = this.currentTabIndex == 1 ? this.animalsList.Keys.ToList()[this.currentIndex] : this.smileyList.Keys.ToList()[this.currentIndex];
            await this.rteObj.RestoreSelectionAsync();
            await this.rteObj.ExecuteCommandAsync(CommandName.InsertHTML, value);
            this.dialogVisible = false;
            this.currentIndex = -1;
        }
    }
    private void DialogOverlay()
    {
        this.dialogVisible = false;
        this.currentIndex = -1;
    }
}

<style>
    #emot_tbar,
    #emot_tbar div {
        cursor: pointer;
    }

    #rteEmoticons-smiley, #rteEmoticons-animal {
        padding: 15px 0 15px 15px;
    }

    .char_block.e-active {
        outline: 1px solid #e3165b;
        border-color: #e3165b;
    }

    .char_block {
        width: 30px;
        height: 30px;
        line-height: 30px;
        margin: 0 5px 5px 0;
        text-align: center;
        vertical-align: middle;
        border: 1px solid #DDDDDD;
        font-size: 20px;
        cursor: pointer;
        user-select: none;
        display: inline-block;
    }

    #rteEmoticons-smiley, #rteEmoticons-animal {
        padding: 15px 0 15px 15px;
    }

    #emot_tbar .rteinsertemot {
        font-size: 18px;
    }

    @@media (min-width: 320px) and (max-width: 480px) {
        #rteEmoticons-smiley, #rteEmoticons-animal {
            padding: 15px 0 15px 0px;
        }
    }

    #rteSection {
        min-height: 500px;
    }

    .bootstrap4 #emotIcons.e-tab .e-tab-header .e-toolbar-item .e-text-wrap:not(.e-horizontal-bottom),
    .bootstrap4 #emotIcons.e-tab .e-tab-header .e-toolbar-item.e-active .e-text-wrap:not(.e-horizontal-bottom) {
        height: 32px;
    }
</style>